<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="ma-content-block lg:flex justify-between p-4">

    <div class="w-4/5 lg:ml-4 mt-5 lg:mt-0">
      <!-- CRUD 组件 -->
      <ma-crud :options="crud" :columns="columns" ref="crudRef">
        <template #operationAfterExtend="{ record }">
          <a-link @click="openCmdPanel(record)">
            <template #icon>
              <icon-scan />
            </template>
            抢红包
          </a-link>
        </template>
      </ma-crud>
    </div>
    <cmd ref="cmdRef" />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from 'vue'
import Api from '@/api/anchor'
import GameApi from '@/api/game'
import UserApi from '@/api/user'
import cmd from "./components/cmd.vue"
import {Message} from "@arco-design/web-vue";

const crudRef = ref()
const crud = reactive({
  api: Api.getPageList,
  recycleApi: Api.getRecyclePageList,
  searchColNumber: 3,
  showIndex: false,
  pageLayout: 'fixed',
  rowSelection: { showCheckedAll: true },
  operationColumn: true,
  operationColumnWidth: 250,
  add: { show: true, api: Api.create},
  edit: { show: true, api: Api.save },
  delete: {
    show: true,
    api: Api.delete,
    realApi: Api.realDelete,
  },
  recovery: { show: true, api: Api.recovery},
  
  isDbClickEdit: false,
  formOption: {
    width:800,
    layout: [
      {
        formType: 'grid', cols: [
          {span: 18, formList: [{dataIndex: 'name'}]},

        ]
      },
      {
        formType: 'grid', cols: [
          {span: 12, formList: [{dataIndex: 'pwd'}]}
          ,{span: 12, formList: [{dataIndex: 'game_id'}]}
        ]
      },
      {
        formType: 'grid', cols: [
          {span: 12, formList: [{dataIndex: 'old_fans_pwd'}]}
        ]
      },
      {
        formType: 'grid', cols: [
          {span: 12, formList: [{dataIndex: 'start_time'}]},
          {span: 12, formList: [{dataIndex: 'end_time'}]}]
      },

      {
        formType: 'grid', cols: [
          {span: 12, formList: [{dataIndex: 'silent_gap'}]},
          {span: 12, formList: [{dataIndex: 'active_gap'}]}]
      },

      {
        formType: 'grid', cols: [
          {span: 12, formList: [{dataIndex: 'network_delay'}]},
          {span: 12, formList: [{dataIndex: 'sentinel_id'}]}]
      },

      {formType: 'grid', cols: [{span: 24, formList: [{dataIndex: 'remark'}]}]},
    ]
  }
})

const columns = reactive([
  { title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true },
  {
    title: '主播名称', dataIndex: 'name', width: 130, search: true,
    commonRules: [{ required: true, message: '主播名称必填' }]
  },
  {
    title: '带货游戏', dataIndex: 'game_id', width: 130,formType: 'select',
    search: true,
    dict: { data:async ()=>{
        let response = await GameApi.getList()
        return response.data
      },
      translation: true,
      props: { label: 'name', value: 'id' } },
    commonRules: [{ required: true, message: '游戏必填' }]
  },
  {
    title: '红包口令', dataIndex: 'pwd', width: 130,
    hide: true,
    //commonRules: [{ required: true, message: '红包口令必填' }]
  },
  {
    title: '老粉口令', dataIndex: 'old_fans_pwd', width: 130,
    hide: true,
    //commonRules: [{ required: true, message: '红包口令必填' }]
  },
  {
    title: '发红包开始时间', dataIndex: 'start_time', width: 130,
    formType: 'time',
    commonRules: [{ required: true, message: '发红包开始时间必填' }]
  },
  {
    title: '发红包结束时间', dataIndex: 'end_time', width: 130,
    formType: 'time',
    commonRules: [{ required: true, message: '发红包开始时间必填' }]
  },
  {
    title: '沉默间隔', dataIndex: 'silent_gap', width: 130,
    formType: 'input-number',addDefaultValue:30,
    commonRules: [{ required: true, message: '沉默间隔必填' }]
    ,placeholder:"没有新的红包时的扫描间隔时间(单位秒)"
  },
  {
    title: '活跃间隔', dataIndex: 'active_gap', width: 130,
    formType: 'input-number',
    commonRules: [{ required: true, message: '活跃间隔必填' }]
    ,addDefaultValue:3
    ,placeholder:"发现新的红包时的扫描间隔时间(单位秒)"
  },
  {
    title: '网络延迟', dataIndex: 'network_delay', width: 60,
    formType: 'input-number'
    ,addDefaultValue: 0
    ,placeholder:"设置该值会提前去抢红包(单位毫秒)"
  },
  {
    title: '哨兵', dataIndex: 'sentinel_id',
    addDisplay: false,
    width: 130,formType: 'select',
    search: true,
    dict: { data:async (e)=>{
        let response = await UserApi.getList()
        return response.data
      },
      translation: true,
      props: { label: 'username', value: 'id' } }
  },
  {
    title: '备注', dataIndex: 'remark', width: 180, hide: true,
    formType: 'textarea', labelWidth: '86px'
  },
  {
    title: '创建时间', dataIndex: 'created_at',
    width: 180, addDisplay: false, editDisplay: false,
    search: true, formType: 'range'
  },
])

const cmdRef = ref()
function openCmdPanel(record){
  if(!record.sentinel_id){
    return Message.error('请先设置哨兵')
  }
  cmdRef.value.open(record)
}


</script>


<style scoped>

</style>
